{{extend './main.html' }}
{{block 'main' }}
<div class="m-5 mt-3">
    <div style="height:2.6rem;">
        <div class="h3 justify-content-center float-left">电影分类管理</div>
        <div class="text-right float-right">
            <button class="btn btn-sm btn-success" id="add">+</button>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>分类</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {{each data}}
            <tr>
                <td>{{$value.tagName}}</td>
                <td>{{$value.meta.createAt}}</td>
                <td>
                    <button class="btn btn-sm btn-danger" data-id={{$value._id.toString()}} onclick='del()'>删除</button>
                    <button class="btn btn-sm btn-info ml-2" data-id={{$value._id.toString()}}  onclick="up()">修改</button>
                </td>
            </tr>
            {{/each}}
            <tr style="display: none;">
                <td><input type="text" name="typename" class="form-control" id="typename" placeholder="请输入名称"></td>
                <td>

                </td>
                <td class="text-right">
                    <button class="btn btn-sm btn-success" id="post">√</button>
                    <button class="btn btn-sm btn-info ml-2">×</button>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
    <a href="/show-movie" class="btn btn-secondary">电影管理</a>
</div>



<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <!-- 模态框主体 -->
            <div class="modal-body">
                模态框内容..
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" style="display: none;" class="btn btn-secondary" id="update">确认</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="hide()">关闭</button>
            </div>
        </div>
    </div>
</div>
<script>
    $('#add').click(function (e) {
        $('tr').last().css({"display":''})
    })
    $('#post').click(function () {
        var data = $('#typename').val();
        $.ajax({
            url: '/create-movietype',
            type: 'POST',
            data: 'tagName=' + data,
            success: function (data, msg) {
                if (data.code === '001') {
                    history.go(0);
                } else if (data.code === '002') {
                    $('#myModal').modal('show');
                    $('.modal-body').text(data.msg);
                }
            }
        });
    }).next().click(function () {
        $('tr').last().css({"display":'none'})
    })
    function hide() {
        $('#update').css("display","none")
    }

    function up() {
        $('#update').css("display","block");
        $('#myModal').modal('show');
        var id=$(event.target).attr('data-id');
        var tagName=$(event.target).parents('tr').find('td');
        tagName=tagName[0].innerText;
        $('.modal-body').html(`<input type="text" name="tname" data-id=${id} placeholder=${tagName}>`);

    }
    $('#update').click(function () {
        var elem=$('.modal-body').children('input')
        var id=elem.attr('data-id');
        var tagName=elem.val()

        $.ajax({
            url: '/update-movietype',
            type: 'POST',
            data:`_id=${id}&tagName=${tagName}`,
            success: function (data) {
                if(data.code==='001')history.go(0);
                if(data.code==='002'){
                    $('.modal-body').append('<span style="color: red;">已有分类</span>')
                }
            }
        });
    })
    function del() {
        var id=$(event.target).attr('data-id')

        $.ajax({
            url: '/del-movietype',
            type: 'GET',
            data: '_id=' + id,
            success: function (data) {
                if(data.code==='001')history.go(0);
            }
        });
    }
</script>
{{/block}}
